<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <!-- 必须注明版本 -->
  <link rel="stylesheet" href="script/lib/bootstrap/dist/css/bootstrap.min.css">
  <!-- 必须注明版本 -->
  <link rel="stylesheet" href="script/lib/bootstrapvalidator/dist/css/bootstrapValidator.min.css">
</head>
<body>

  <div class="container">
    <form class="form form-horizontal">
      <div class="form-group">
        <label class="control-label col-sm-2" for="user-name">姓名</label>
        <div class="col-sm-4">
          <input class="form-control" name="user-name" type="text">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="user-age">年龄</label>
        <div class="col-sm-4">
          <input class="form-control" name="user-age" type="text">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="user-email">邮箱</label>
        <div class="col-sm-4">
          <input class="form-control" name="user-email" type="email">
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4 col-sm-offset-2">
          <button class="btn btn-primary" name="submit" type="submit">提交</button>
          <button class="btn btn-default" type="reset">重置</button>
        </div>
      </div>              
    </form>    
  </div>


  <!-- 必须注明版本 -->
  <script src="script/lib/jquery/dist/jquery.min.js"></script>
  <!-- 必须注明版本 -->
  <script src="script/lib/bootstrap/dist/js/bootstrap.min.js"></script>
  <!-- 必须注明版本 -->
  <script src="script/lib/bootstrapvalidator/dist/js/bootstrapValidator.min.js"></script>
  <!-- 语言包 -->
  <script src="script/lib/bootstrapvalidator/dist/js/language/zh_CN.js"></script>
  <script>
    $(function(){
      $('form').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
          valid: 'glyphicon glyphicon-ok',
          invalid: 'glyphicon glyphicon-remove',
          validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
          'user-name': {
              message: '尚未验证用户名',
              validators: {
                notEmpty: {
                  message: '用户名不能为空'
                },
                stringLength: {
                  min: 6,
                  max: 30,
                  message: '请将用户名长度控制在6~30字符'
                },
                regexp: {
                  regexp: /^[a-zA-Z0-9_]+$/,
                  message: '用户名只能包含字母数字下划线'
                }
              }
          },
          'user-age': {
            validators: {
              notEmpty: {
                message: '年龄不能为空'
              },
              regexp: {
                regexp: /[0-9]+/,
                message: '请输入正确的年龄'
              }
            }
          },
          'user-email': {
            validators: {
              notEmpty: {
                message: '邮箱不能为空'
              },
              emailAddress: {
                message: '不是有效的邮箱地址'
              }
            }
          }
        }
      }).on('success.bv.form',function(){
        alert('yo');
      });
    });
  </script>
</body>
</html>